<template>
  <div class="aaa order-detail-container">
    <!-- 订单进度卡片 -->
    <el-card class="service-provider-card order-progress-card" style="max-width: 50%; margin-right: 20px;">
      <template #header>
        <div class="card-header">
          <h3>订单进度</h3>
        </div>
      </template>
      <div class="card-body">
        <el-steps style="max-width: 600px" :active="orderStatus.status" align-center class="order-progress-steps">
          <el-step v-for="item in ordersStatus" :title="item.name" :description="orderStatus.time"
                   class="order-step-item" />
        </el-steps>
      </div>
    </el-card>
    <!-- 订单信息卡片 -->
    <el-card class="service-provider-card order-info-card" style="max-width: 50%;">
      <template #header>
        <div class="card-header">
          <h3>订单信息</h3>
        </div>
      </template>
      <div class="card-body">
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">订单编号：{{ orders.id }}</p>
          <p class="order-info-item">订单状态：
            <span v-if="orders.ordersStatus == 0">待支付</span>
            <span v-if="orders.ordersStatus == 100">派单中</span>
            <span v-if="orders.ordersStatus == 200">待服务</span>
            <span v-if="orders.ordersStatus == 300">服务中</span>
            <span v-if="orders.ordersStatus == 500">订单完成</span>
            <span v-if="orders.ordersStatus == 600">已取消</span>
            <span v-if="orders.ordersStatus == 700">已关闭</span>
          </p>
          <p class="order-info-item">下单时间：
            <span v-if="orders.createTime == null">--</span>
            <span v-else>{{ orders.createTime }}</span>
          </p>
          <p class="order-info-item">客户电话：
            <span v-if="orders.contactsPhone == null">--</span>
            <span v-else>{{ orders.contactsPhone }}</span>
          </p>
          <p class="order-info-item">服务详细地址：
            <span v-if="orders.serveAddress == null">--</span>
            <span v-else>{{ orders.serveAddress }}</span>
          </p>
        </div>
        <div style="display: inline-block;width:6%;"></div>
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">订单状态：
            <span v-if="orders.ordersStatus == 0">待支付</span>
            <span v-if="orders.ordersStatus == 100">派单中</span>
            <span v-if="orders.ordersStatus == 200">待服务</span>
            <span v-if="orders.ordersStatus == 300">服务中</span>
            <span v-if="orders.ordersStatus == 500">订单完成</span>
            <span v-if="orders.ordersStatus == 600">已取消</span>
            <span v-if="orders.ordersStatus == 700">已关闭</span>
          </p>
          <p class="order-info-item">服务类型名称：
            <span v-if="orders.serveTypeName == null">--</span>
            <span v-else>{{ orders.serveTypeName }}</span>
          </p>
          <p class="order-info-item">服务名称：
            <span v-if="orders.serveItemName == null">--</span>
            <span v-else>{{ orders.serveItemName }}</span>
          </p>
          <p class="order-info-item">客户姓名：
            <span v-if="orders.contactsName == null">--</span>
            <span v-else>{{ orders.contactsName }}</span>
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from "vue-router";
import { findOrderStatusById } from "@/api/order";

const route = useRoute();
const id = route.query.id;
console.log(id);

// 订单状态
const orderStatus = ref({
  status: null,
  time: null
});
const orders = ref({});

const getOrderDetails = () => {
  findOrderStatusById(id).then(res => {
    console.log(res.data);
    orders.value = res.data.data;

    // 根据订单状态设置进度步骤的状态和时间
    if (orders.value.ordersStatus == 0) {
      orderStatus.value.status = 1;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 100) {
      orderStatus.value.status = 2;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 200) {
      orderStatus.value.status = 3;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 300) {
      orderStatus.value.status = 4;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 500) {
      orderStatus.value.status = 5;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 600) {
      orderStatus.value.status = 6;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 700) {
      orderStatus.value.status = 7;
      orderStatus.value.time = orders.value.createTime;
    }
  });
};
getOrderDetails();

// 订单状态，0：待支付，100：派单中，200：待服务，300：服务中，500：订单完成，600：已取消，700：已关闭
const ordersStatus = ref([
  {
    name: '待支付',
    value: 0
  },
  {
    name: '派单中',
    value: 100
  },
  {
    name: '待服务',
    value: 200
  },
  {
    name: '服务中',
    value: 300
  },
  {
    name: '订单完成',
    value: 500
  },
  {
    name: '已取消',
    value: 600
  },
  {
    name: '已关闭',
    value: 700
  }
]);
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.service-provider-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white;
}

.order-progress-card,
.order-info-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.order-progress-steps {
  font-size: 14px;
  color: #666;
}

.order-step-item {
  margin-bottom: 10px;
}

.order-info-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}
</style>
